<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- <link href="__STATIC__/product_info/css/index.css" rel="stylesheet" type="text/css" />
  <link href="__STATIC__/product_info/css/reset.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="__STATIC__/product_info/plugins/swiper/css/swiper.min.css" />
  <link rel="stylesheet" href="__STATIC__/product_info/plugins/xgplayer/index.min.css" />  -->

  <link href="./css/index.css" rel="stylesheet" type="text/css" />
  <link href="./css/reset.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="./plugins/layui/css/layui.css" />
  <link rel="stylesheet" href="./plugins/swiper/css/swiper.min.css" />
  <link rel="stylesheet" href="./plugins/xgplayer/index.min.css" />
</head>

<body>
  <!-- <script src="__STATIC__/product_info/plugins/swiper/js/swiper.min.js"></script>
  <script src="__STATIC__/product_info/plugins/xgplayer/index.min.js"></script> -->

  <script src="./plugins/jquery/jquery-3.7.0.min.js" type="text/javascript"></script>
  <script src="./plugins/swiper/js/swiper.min.js" type="text/javascript"></script>
  <script src="./plugins/layui/layui.js" type="text/javascript"></script>
  <script src="./plugins/xgplayer/index.min.js" type="text/javascript"></script>
  <script src="./plugins/dragscroll.js" type="text/javascript"></script>

  <div class="container">
    <form class="layui-form layui-form-pane1" lay-filter="first">
      <div style="display: flex">
        <div style="width: 150px; margin-right: 20px">
          <input type="text" placeholder="请输入商品名称" autocomplete="off" class="layui-input" id="shopForm-name" />
        </div>
        <div style="width: 150px; margin-right: 20px">
          <input type="text" placeholder="请输入商品最低价" autocomplete="off" class="layui-input" id="shopForm-min" />
        </div>
        <div style="width: 150px; margin-right: 20px">
          <input type="text" placeholder="请输入商品最高价" autocomplete="off" class="layui-input" id="shopForm-max" />
        </div>
        <div style="width: 200px" class="search-box">
          <select lay-filter="interest-search" lay-search id="shopForm-org">
            <option value="">请选择所属机构</option>
          </select>
        </div>
        <button id="serch">查询</button>
        <button type="reset" id="reset">重置</button>
        <button id="export">导出</button>
        <button id="vs" onclick="showVsDialog(event)" style="display: none;">vs</button>
      </div>
    </form>
    <div class="shop-box">
      <div class="shop-left"></div>
      <div class="shop-right">
        <div class="goods-list"></div>
        <div id="demo-laypage-all"></div>
      </div>
    </div>
  </div>
  <div style="height: 200px;width: 100px;overflow: auto;" class="dragscroll">
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
  </div>

  </div>

  <script type="text/javaScript">


        function http(options) {
      return new Promise((resolve, reject) => {
          $.ajax({
            url: options.url,
            method: options.method,
            data: options.data,
            success: function (response) {
              resolve(response)
            },
            error: function (xhr, status, error) {
              reject(error)
            }
          })
        })
    }
        // 搜索表单数据
        var shopForm = {
          name: '',
        min: '',
        max: '',
        org: ''
    }
        // 当前选中分类
        var category_id = ''
        // 分类数据
        var categorys = [
        {
          name: '全部',
        id: ''
      },
        {
          name: '工艺品',
        id: '1'
      },
        {
          name: '日用文具',
        id: '2'
      },
        {
          name: '包装产品包装产品包装产品包装产品',
        id: '3'
      },
        {
          name: '电子产品',
        id: '4'
      }
        ]
        // 商品数据
        var goods = [
        {
          id: '1',
        imgurl: 'https://picsum.photos/200?1',
        classificationId: '1',
        shopName: '精美背包1',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },
        {
          id: '2',
        classificationId: '2',
        imgurl: 'https://picsum.photos/200?2',
        shopName: '精美背包2',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },

        {
          id: '3',
        classificationId: '1',
        imgurl: 'https://picsum.photos/200?3',
        shopName: '精美背包3',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },

        {
          id: '4',
        classificationId: '3',
        imgurl: '',
        shopName: '精美背包4',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },

        {
          id: '5',
        classificationId: '4',
        imgurl: '',
        shopName: '精美背包5',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },

        {
          id: '6精美背包6精美背包6精美背包6精美背包6精美背包6精美背包6精美背包6精美背包6精美背包6',
        classificationId: '4',
        imgurl: '',
        shopName: '精美背包6',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      },

        {
          id: '7',
        classificationId: '4',
        imgurl: '',
        shopName: '精美背包7',
        price: '50',
        specifications: '大号',
        inventory: '8888',
        grade: '5'
      }
        ]
        var organizations = [
        {
          company_name: '人名报社',
        company_id: 1
      },
        {
          company_name: '健康报社',
        company_id: 2
      }
        ]
    $().ready(() => {
          layui.use(['form', 'laypage'], function () {
            var form = layui.form
            var laypage = layui.laypage;
            // 完整显示
            laypage.render({
              elem: 'demo-laypage-all', // 元素 id
              count: 100, // 数据总数
              layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
              jump: function (obj) {
                console.log(obj);
              }
            });
            form.on('select', function (data) {
              shopForm.org = data.value
            })
          })
      init()
    })
        // 初始化数据
        async function init() {
          await getOrganizationList()
      await getCategoryList()
        await getGoodsList()
    }

        // 获取机构列表
        async function getOrganizationList() {
          renderOrganizationList()
        }
    // 渲染机构列表
        function renderOrganizationList() {
          setTimeout(() => {
            const html = organizations
              .map((item) => {
                return `<option value="${item.company_id}">${item.company_name}</option>`
              })
              .join('')
            $('#shopForm-org').append(html)
            layui.form?.render('select')
          }, 1000);

    }

        // 获取分类列表
        async function getCategoryList() {
          renderCategoryList()
        }
    // 渲染分类列表
        function renderCategoryList() {
          $('.shop-left').empty()
      const html = categorys
        .map((item) => {
          return `<div class="item ${category_id === item.id ? 'active' : ''}" onclick='handleClick(event,${JSON.stringify(item)})' >${item.name}</div>`
        })
        .join('')
        $('.shop-left').html(html)
    }

        // 获取商品列表
        async function getGoodsList() {
          renderGoodsList()
        }
    // 渲染商品列表
        function renderGoodsList() {
          $('.goods-list').empty()
      const html = goods
        .map((item) => {
          return `<div class="shop-item" onclick=showDetailDialog(event,${JSON.stringify(item)}) >
        <img src="${item.imgurl}" alt="">
          <div class="shop-info">
            <div class="shop-name">${item.shopName}</div>
            <div class="shop-price">￥${item.price}</div>
            <div class="shop-specifications">规格:${item.specifications}</div>
            <div class="shop-inventory">库存:${item.inventory}件</div>
            <div class="shop-grade">评分:${item.grade}
              <input type="checkbox" name="myCheckbox" onclick='stopClick(event)' onchange='handleChange(event,${JSON.stringify(item)})' />
            </div>
          </div>
        </div>`

        }).join('')
        $('.goods-list').html(html)
    }

        $('#shopForm-name, #shopForm-min, #shopForm-max').on('input', function (e) {
      const key = $(this).attr('id').replace('shopForm-', '')
        console.log(e.target.value);
        shopForm[key] = e.target.value
    })
        //回车搜索
        $('#shopForm-name, #shopForm-min, #shopForm-max').on('keydown', function (e) {
      if (event.keyCode === 13) {
          e.preventDefault()
        serchFrom()
      }
    })

        $('#serch').on('click', function (e) {
          e.preventDefault()
      serchFrom()
    })

        $('#reset').on('click', function (e) {
          shopForm = {
            name: '',
            min: '',
            max: '',
            org: ''
          }
        })

        function serchFrom() {
          console.log(shopForm, 'shopForm')
        }

        function handleClick(e, item) {
          category_id = item.id
      renderCategoryList()
        renderGoodsList()
    }

        function  showVideo(params) {
          console.log(params, 'params');
        $('.masking-box').append(`
        <div class="video-box">
          <div class="video-content">
            <div class="video-close" onclick="closeVideo()"> 关闭</div>
            <div id='video-container' ></div>
          </div>
        </div>`)
        $('#video-container').ready(()=>{
       var config = {
          "id": "video-container",
        "url": "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
        "playsinline": true,
        height: '100%',
        width: '100%',
        "poster": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        "plugins": []
        }

        var player = new Player(config)
        })
   
    }

        function closeVideo(params) {
          $('.video-box').remove()
        }


        function showVsDialog(e) {
          e.preventDefault()
      var fmhtml = goods.map(item=>{
        return ` <div class="item">
          <img src="${item.imgurl}" alt="" />
        </div>`
      }).join('')

      var idhtml = goods.map(item=>{
        return `<div class="item">${item.id}</div>`
      }).join('')



        $('body').append(`  <div class="bg-vs">
          <div class="vs-box">
            <div class="header">头部</div>
            <div class="content ">
              <div class="left">
                <div class="row">商品封面</div>
                <div class="row">商品id</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
                <div class="row">名称</div>
              </div>
              <div class="right dragscroll ">
                <div class="row">
                  ${fmhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>
                <div class="row">
                  ${idhtml}
                </div>

              </div>
            </div>

          </div>`)
          dragscroll.reset()
  $('.vs-box .content .right').ready(()=>{
            $('.vs-box .content .left .row').each((index, row) => {
              $(row).css('height', $('.vs-box .content .right .row').eq(index).height())
            })
          })
    }
          function closeVsDialog (e) {
            $('.bg-vs').remove()
          }

          function showDetailDialog(e, item) {
            $('body').append(`<div class="bg-detail">
        <div class="masking-box">
          <div class="close" onclick='closeDetailDialog()'>
            关闭
          </div>
          <div class="detail">
            <div class="left">
              <div class="left-top">11</div>
              <div class="left-center"></div>
              <div class="left-bottom"></div>
            </div>
            <div class="right"></div>
          </div>
          <div class="footer">
            <div class="swiper">
              <div class="swiper-wrapper">

              </div>

              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>
        </div>
      </div>`)
      $('.swiper').ready(() => {
            $('.swiper-wrapper').append(`<div class="swiper-slide" onclick='showVideo("https://1500026133.vod-qcloud.com/6cbef0b7vodcq1500026133/e4daecec3270835013994368673/89NIV3GXe4oA.mp4")'>Slide 1</div>
                <div class="swiper-slide" onclick='showVideo("https://1500026133.vod-qcloud.com/6cbef0b7vodcq1500026133/9103b9013270835013993085424/cxcbUmXOje4A.mp4")'>Slide 2</div>
               `)
        var mySwiper = new Swiper('.swiper', {
            loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
          }
        })
      })
    }

          function closeDetailDialog(e) {
            $('.bg-detail').remove()
          }
          var checkList = []
          function stopClick(e) {
            e.stopPropagation()
          }

          function handleChange(e, item) {
      if (!checkList.includes(item.id)) {
            checkList.push(item.id)
          } else {
            checkList = checkList.filter((f) => f != item.id)
          }
      if(checkList.length >0){
            $('#vs').css('display', 'block')
          }else{
            $('#vs').css('display', 'none')
          }
          console.log(checkList)
    }
  </script>
</body>

</html>